<body>
    <script src="../build/index.js"></script>
    <script src="../build/components.js"></script>
    <canvas id="app" width="800" height="1800" style="width: 800px; height: 1800px; opacity: 0.1;"></canvas>

    <script>
        var COUNT = 5000; // 5000  20-30fps

        var $app = new Easycanvas.Painter();
        $app.register(document.getElementById('app'), {
            name: 'main',
        });
        $app.start();
        // $app.fpsHandler = console.log;

        $app.imgLoader.cacheCanvas = true;
        var demoPicUrl = 'https://raw.githubusercontent.com/c-zhuo/easycanvas/master/demos/block.jpg';

        var $static = $app.add(Easycanvas.StaticView({
            style: {
                left: Easycanvas.Transition.pendulum(0, 200, 5000).loop(),
                top: 0,
                locate: 'lt',
            }
        }));

        $app.imgLoader(demoPicUrl, function (img) {
            console.log('img loaded', Date.now());
            // create a Sprite
            for (var i = 0; i <= COUNT; i++) {
                window.temp = $static.add({
                    name: 'img' + i,
                    content: {
                        img: img,
                    },
                    style: {
                        left: Math.random() * 500,
                        top: (Math.random() * 500),
                        width: (Math.random() * 200),
                        height: (Math.random() * 200),
                        zIndex: Math.random(),
                    },
                    events: {
                        click () {
                            console.log(this.name)
                        }
                    }
                });
            }

            console.log('sprite added', Date.now());
        });

        window.__EASYCANVAS_DEVTOOL__.isPaintRecording = false;
    </script>
</body>

